<!--  -->
<template>
  <div class="warp-box">
    <div class="head-box">
      <el-form :model="formObj" label-width="80" :inline="false">
        <el-form-item label="项目">
          <el-input v-model="formObj.name" style="width: 200px" placeholder="请输入项目名称" />
        </el-form-item>
        <el-form-item label="产品">
          <el-input v-model="formObj.product" style="width: 200px" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="零件">
          <el-input v-model="formObj.part" style="width: 200px" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="工序">
          <el-input v-model="formObj.procedure" style="width: 200px" placeholder="请输入" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="main-box">
      <div class="tabel-box">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="index" width="80" label="序号" fixed />
          <el-table-column prop="date" label="单据编号" width="180" fixed />
          <el-table-column prop="name" label="主题" width="180" />
          <el-table-column prop="address1" label="源单类型" />
          <el-table-column prop="address2" label="源单数量" />
          <el-table-column prop="address3" label="物品编号" />
          <el-table-column prop="address4" label="物品编号" />
          <el-table-column prop="address5" label="加工车间" />
          <el-table-column prop="address6" label="加工类型" />
          <el-table-column prop="address7" label="负责人" />
          <el-table-column prop="address8" label="制单人" />
          <el-table-column prop="address9" label="制单时间" width="180" />
          <el-table-column prop="address10" label="流程状态" width="180" />
          <el-table-column prop="address11" label="制单人" />
          <el-table-column fixed="right" label="操作" min-width="200">
            <template #default>
              <el-button link type="primary" size="small" @click.prevent="my2DImgFunc"> 二维图纸 </el-button>
              <el-button link type="primary" size="small" @click.prevent="my3DModelFunc"> 3D模型 </el-button>
              <el-button link type="primary" size="small" @click.prevent="processSheetFunc"> 工艺单 </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="foot-box">
        <el-pagination
          v-model:current-page="currentPage4"
          v-model:page-size="pageSize4"
          :page-sizes="[50, 100, 150, 200]"
          size="default"
          :disabled="false"
          :background="false"
          layout="total, sizes, prev, pager, next, jumper"
          :total="2"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <MyDialog :show="mdShow" @closeFun="(back) => (mdShow = back)" :cancel="'上传'" :confirmBut="'下载'">
      wwww
    </MyDialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue"
import MyDialog from "../../components/MyDialog/index.vue"
export default defineComponent({
  name: "ProdTasksPage",
  components: {
    MyDialog
  },
  setup() {
    const formObj = ref({
      name: "",
      procedure: "",
      product: "",
      part: ""
    })
    const mdShow = ref(false)
    const currentPage4 = ref(1)
    const pageSize4 = ref(50)
    const tableData = [
      {
        date: "XSDF-5465446513",
        name: "BBBBB",
        address1: "aa",
        address2: "55",
        address3: "0110",
        address4: "aa",
        address5: "aa",
        address6: "aa",
        address7: "aa",
        address8: "aa",
        address9: "2024-08-03",
        address10: "等待中。。。",
        address11: "aa"
      },
      {
        date: "XSDF-5465446518",
        name: "BBBBB",
        address1: "aa",
        address2: "55",
        address3: "0110",
        address4: "aa",
        address5: "aa",
        address6: "aa",
        address7: "aa",
        address8: "aa",
        address9: "2024-08-03",
        address10: "加工中。。。",
        address11: "aa"
      }
    ]
    // 查询
    const onSubmit = () => {
      console.log("点击了查询===")
    }
    //  分页
    const handleSizeChange = (val: number) => {
      console.log(`${val} items per page`)
    }
    // 分页
    const handleCurrentChange = (val: number) => {
      console.log(`current page: ${val}`)
    }
    //
    const my2DImgFunc = () => {
      mdShow.value = true
      console.log(`output->`, "点击了2维图纸", mdShow.value)
    }
    //
    const my3DModelFunc = () => {
      mdShow.value = true

      console.log(`output->`, "点击了三维模型")
    }
    //
    const processSheetFunc = () => {
      mdShow.value = true

      console.log(`output->`, "点击了工艺单")
    }
    return {
      formObj,
      onSubmit,
      handleCurrentChange,
      currentPage4,
      pageSize4,
      tableData,
      handleSizeChange,
      my2DImgFunc,
      processSheetFunc,
      my3DModelFunc,
      mdShow
    }
  }
})
</script>
<style scoped lang="scss">
.warp-box {
  padding: 20px;
  .head-box {
    height: 100px;
    width: 100%;
    background-color: #fff;
    border-radius: 8px;
    margin-bottom: 20px;
    padding: 20px;
    .el-form {
      display: flex;
      flex-wrap: wrap;
      overflow: auto;
      // height: 60px;
    }
  }
  .main-box {
    height: calc(100% - 120px);
    width: 100%;
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
    .tabel-box {
      height: calc(100% - 50px);
      .el-table {
        height: 100%;
      }
    }
    .foot-box {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 10px;
    }
  }
}
</style>
